<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item v-show="false" label="用户名称"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input v-decorator="['username'],{rules: [{ required: true, message: '' }]}"/>
        </a-form-item>
        <a-form-item
          label="旧密码"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input
            v-decorator="['oldPassword', {rules: [{ required: true, message: '请输入旧密码' }]}]"
            placeholder='请输入旧密码' />
        </a-form-item>
        <a-form-item
          label="新密码"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input 
            v-decorator="['newPassword', {rules: [{ required: true, message: '请输入信息吗' }]}]"
            placeholder="请输入新密码" />
        </a-form-item>
        <a-form-item
          label="确认新密码"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input 
            v-decorator="[ 'newPassword2', {rules: [{ required: true, message: '请输入新密码' }]}]"
            placeholder='请输入新密码' />
        </a-form-item>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import pick from 'lodash.pick'
import { updatePasswordttt} from '@/api/system'
const fields = ['username', 'oldPassword', 'newPassword', 'newPassword2']
export default {
  name: 'BaseForm',
  data () {
    return {
      form: this.$form.createForm(this),
      model:{
        username:this.$store.getters.userInfo.data.username,
        newPassword:'',
        oldPassword:''
      }
    }
  },
  created () {
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
      // this.model.alarmsData && this.form.setFieldsValue(pick(this.model.alarmsData, fields))
    })
  },
  methods: {
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        console.log(values)
        if (!err) {
          this.model.newPassword=values.newPassword
          this.model.oldPassword=values.oldPassword
          if(values.newPassword!=values.newPassword2){
            this.$message.error('两次新密码输入不正确!')
            return
          }
          updatePasswordttt(this.model).then(res=>{
            if (res.code === 200) {
              this.$message.success('修改成功')
            } else {
              this.$message.error(res.message)
            }

          })
        }
      })
    }
  }
}
</script>
